<template>
    <el-container>
        <el-header>
            <div>
                <img src="" alt="">
                <span>博客后台管理系统</span>
            </div>
            <el-button type="info" plain size="small" @click="logout">退出</el-button>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu background-color="#373d41" default-active="/graphical"
                        text-color="#fff"
                        active-text-color="#ffd04b" router>
                    <el-menu-item :index="item.path" v-for="item in menus" :key="item.id">
<!--                        菜单-->
                        <template slot="title">
<!--                            图标-->
                            <i :class="item.icon"></i>
<!--                            文本-->
                            <span>{{item.authName}}</span>
                        </template>
                    </el-menu-item>
<!--                    <el-menu-item index="1">-->
<!--                        <i class="el-icon-picture"></i>-->
<!--                        <span slot="title">图形统计</span>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="2">-->
<!--                        <i class="el-icon-edit"></i>-->
<!--                        <span slot="title" @click="publish">发布文章</span>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="3" >-->
<!--                        <i class="el-icon-document"></i>-->
<!--                        <span slot="title">文章管理</span>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="4">-->
<!--                        <i class="el-icon-chat-dot-round"></i>-->
<!--                        <span slot="title">评论管理</span>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="5">-->
<!--                        <i class="el-icon-price-tag"></i>-->
<!--                        <span slot="title">分类/标签</span>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="6">-->
<!--                        <i class="el-icon-upload"></i>-->
<!--                        <span slot="title">文件管理</span>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="7">-->
<!--                        <i class="el-icon-setting"></i>-->
<!--                        <span slot="title">系统设置</span>-->
<!--                    </el-menu-item>-->
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view></router-view>
                </el-main>
                <el-footer>
                    <span>Copyright © 2018-2020 boke All Rights Reserved.</span>
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                menus: [
                    {"id":"1","authName":"图形统计" ,"icon":"el-icon-picture","path":"/graphical"},
                    {"id":"2","authName":"发布文章","icon":"el-icon-edit","path":"/publish"},
                    {"id":"3","authName":"文章管理","icon":"el-icon-document","path":"/managearticle"},
                    {"id":"4","authName":"评论管理","icon":"el-icon-chat-dot-round","path":"/managecomment"},
                    {"id":"5","authName":"分类/标签","icon":"el-icon-price-tag","path":"/label"},
                    {"id":"6","authName":"文件管理","icon":"el-icon-upload","path":"/managedocument"},
                    {"id":"7","authName":"系统设置","icon":"el-icon-setting","path":"/system"},
                ]
            };
        },
        created() {
            this.getMenuList()
        },
        methods: {
            //退出
            logout() {
                window.sessionStorage.clear()
                this.$router.push("/login")
            },
            //获取菜单数据
            getMenuList() {
                this.$http.get('menus')
            },
            publish() {
                this.$router.push("/publish")
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #373d41;
        text-align: center;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 16px;
    }
    .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container,.is-vertical {
        margin-bottom: 40px;
        height: 100%;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    /*aside*/
    .el-menu {
        height: 100%;
    }
</style>
